<template>
  <div id="app">  
    <title title="我的订单"></title> 
    <a href="me.html"><span class="logonImg"><img src="img/left.jpg"></span></a>
  <div id="warp">
    <div class="Btn">
        <button class="select">待付款</button>
         <button>待发货</button>
          <button>待收货</button>
           <button>成功交易</button>
           <button>退货/售后</button>
    </div>
        <div class="btnTab show">
            <conone></conone>
        </div>
        <div class="btnTab"> 
          <contwo></contwo>     
        </div>
        <div class="btnTab">
          <conthree></conthree>
        </div>
        <div class="btnTab">
          <confour></confour>
        </div>
        <div class="btnTab">
          <confive></confive>
        </div>
  </div>
    
  </div>
</template>

<script>
import Title from '../commons/title'
import Conone from './conone'
import Contwo from './contwo'
import Conthree from './conthree'
import Confour from './confour'
import Confive from './confive'

export default {
   ready:function () {
    var $input =$("button");
    var $div=$(".btnTab");
    $input.on("touchstart",function(){
    $input.removeClass("select");
    $(this).addClass("select");
    $div.css("display","none");
    $div.eq($(this).index()).css("display","block");

  });
  },
  components: {
    Conone,
    Contwo,
    Conthree,
    Confour,
    Confive,
    Title
  }
}
</script>

<style>
html,body{
  height: 100%;
  background-color: #f2f2f2;
}
  .logonImg{
       display: inline-block;
    position: fixed;
    top: 1.5%;
    width: 5%;
    left: 2%;
    z-index:1888;
  }
   .logonImg img{
    width:100%;
  }
  #warp{
    width: 100%;
    margin:auto;
  }
  #warp .Btn,button{
    background: white;
  }
  button{
    width: 0.72rem;
    height: 0.3rem;
    border:none; 
    outline:none;
  }
  #warp .btnTab{
    width: 100%;
    display: none;
  }
  #warp .show{
    display: block;
  }
  .select{
    border-bottom: 3px solid #f29004;
  }
</style>
